<template>
	<my-box title="人员位置查询">
		<my-input :clearable="false" placeholder="请输入姓名/区队/工种/跟班OR带班/区域">
			<template #suffix>
				<el-icon><Search /></el-icon>
			</template>
		</my-input>
		<div class="f1 h0 overflow-y-auto">
			<div v-for="item in list" :key="item.name" class="position">
				<div class="flex m-between s-center">
					<div class="position-name flex s-center">
						{{ item.workerName }}
						<span v-if="item.systemNam">（{{ item.systemName }}）</span>
						<div class="type">{{ item.workerPost }}</div>
					</div>
				</div>
				<div class="position-date flex m-between m-t-10">
					<div>下井时长: {{ item.workingCount }}</div>
					<div>下井时间: {{ item.workingTime }}</div>
				</div>
				<div class="position-val flex s-center m-t-10">
					<img class="m-r-4" :src="getImgUrl('MakeDecision/定位.png')" alt="" />
					当前位置: {{ item.position }}
				</div>
			</div>
		</div>
	</my-box>
</template>

<script setup>
defineProps({
	list: {
		type: Array,
		required: true
	}
})
</script>

<style lang="scss" scoped>
.position {
	padding: 10px 0;
	.type {
		margin-left: 10px;
		background: rgba(77, 136, 254, 0.1);
		box-sizing: border-box;
		border: 1px solid #276cf7;
		padding: 0 10px;
		font-size: 12px;
		color: rgba(91, 146, 255, 1);
		border-radius: 2px;
	}
	&-name {
		color: #ffffff;
		text-shadow: 0px 1px 1px rgba(4, 18, 42, 0.6);
		font-size: 16px;
	}
	&-date {
		font-size: 12px;
		color: #deedff;
		text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
	}
	&-val {
		color: rgba(222, 237, 255, 1);
		text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
		font-size: 14px;
	}
	& + .position {
		border-top: 1px solid rgba(76, 107, 209, 0.5);
		padding-top: 10px;
	}
}
</style>
